<template>
  <basic-form
    ref="menuForm"
    primary-key="menuId"
    v-model="menuForm"
    :rules="menuRules"
    :query-api="menu_queryByIdApi"
    :insert-api="menu_insertApi"
    :update-api="menu_updateApi"
    :labelCol="labelCol"
    formType="dialog"
  >
    <a-steps
      :current="current"
      @change="onChange"
      v-if="menuForm.menuType=='MENU'"
      style="margin-bottom:20px"
    >
      <a-step title="基本信息" />
      <a-step title="路由配置" />
      <a-step title="更多配置" />
    </a-steps>

    <div v-show="current==0">
      <a-form-model-item label="标题" prop="title" help="类型为菜单时：菜单栏展示文字,类型为资源时:资源名称">
        <a-input v-model="menuForm.title" />
      </a-form-model-item>
      <a-form-model-item label="父菜单" prop="parentId" ref="parentId">
        <a-tree-select
          v-model="menuForm.parentId"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          style="width: 100%"
          :tree-data="treeData"
          placeholder="请选择"
        ></a-tree-select>
      </a-form-model-item>
      <a-form-model-item label="菜单类型" prop="menuType" help="菜单:在页面展示的菜单 资源:控制后台资源的访问">
        <dictionary-select codeItemId="ORG_MENU_TYPE" v-model="menuForm.menuType"></dictionary-select>
      </a-form-model-item>
      <a-form-model-item label="排序" prop="sortNo" ref="sortNo" help="菜单的排序设置,通过排序可更改菜单的顺序">
        <a-input v-model.number="menuForm.sortNo" />
      </a-form-model-item>
      <a-form-model-item label="权限Key" prop="authorityKey" ref="authorityKey" help="访问后台接口的权限key值">
        <a-input v-model="menuForm.authorityKey" />
      </a-form-model-item>
    </div>

    <div v-show="current==1 && isMenu">
      <a-form-model-item label="Name" prop="menuName" help="类型为菜单时：vue-router路由name">
        <a-input v-model="menuForm.menuName" />
      </a-form-model-item>
      <a-form-model-item label="Path" prop="path" help="类型为菜单时：配置vueRouter必要参数,承接上级路由">
        <a-input v-model="menuForm.path" />
      </a-form-model-item>
      <a-form-model-item label="组件地址" prop="component" ref="component" help="类型为菜单时：配置路由指向的文件页面地址">
        <a-auto-complete v-model="menuForm.component" @search="handleSearch">
          <template slot="dataSource">
            <a-select-option v-for="data in result" :key="data">{{ data }}</a-select-option>
          </template>
        </a-auto-complete>
      </a-form-model-item>
      <a-form-model-item label="跳转地址" prop="redirect" help="类型为菜单时：配置vueRouter可选参数,路由需要重定向可以配置">
        <a-input v-model="menuForm.redirect" />
      </a-form-model-item>
      <a-form-model-item label="菜单栏" prop="hidden" help="类型为菜单时：是否显示在菜单栏">
        <a-radio-group v-model="menuForm.hidden">
          <a-radio :value="false">显示</a-radio>
          <a-radio :value="true">隐藏</a-radio>
        </a-radio-group>
      </a-form-model-item>
    </div>

    <div v-show="current==2 && isMenu">
      <a-form-model-item label="图标" prop="icon" ref="icon" help="类型为菜单时：菜单栏图标">
        <icon-select v-model="menuForm.icon"></icon-select>
      </a-form-model-item>
      <a-form-model-item label="副标题" prop="subTitle" help="类型为菜单时：菜单二级标题">
        <a-input v-model="menuForm.subTitle" />
      </a-form-model-item>
      <a-row>
        <a-col span="12">
          <a-form-model-item
            :labelCol="{span:6}"
            :wrapperCol="{span:16}"
            label="头部信息"
            prop="hidden"
            help="类型为菜单时：显示页面头部信息"
          >
            <a-radio-group v-model="menuForm.hiddenHeaderContent">
              <a-radio :value="false">显示</a-radio>
              <a-radio :value="true">隐藏</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col span="12">
          <a-form-model-item
            :labelCol="{span:6}"
            :wrapperCol="{span:16}"
            label="是否缓存"
            prop="keepAlive"
            help="类型为菜单时：页面是否缓存"
          >
            <a-radio-group v-model="menuForm.keepAlive">
              <a-radio :value="true">是</a-radio>
              <a-radio :value="false">否</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
      </a-row>
    </div>
  </basic-form>
</template>
<script>
import {
  menu_queryByIdApi,
  menu_insertApi,
  menu_updateApi,
  getmenu,
  menuTree
} from "@/api/org/menu";
import { menuRule, buttonRule } from "@/profile/org/menu";
const dataSource = ["BasicLayout", "PageView", "RouteView"];
export default {
  props: {
    menuId: {
      type: String
    },
    formState: {
      type: String
    }
  },
  data() {
    return {
      current: 0,
      menu_queryByIdApi,
      menu_insertApi,
      menu_updateApi,
      labelCol: { span: 3 },
      menuForm: {
        menuId: undefined,
        parentId: undefined,
        hidden: false,
        hiddenHeaderContent: false
      },
      treeData: [],
      result: []
    };
  },
  created() {
    this.getMenuTree();
    if (this.formState != "add") this.menuForm.menuId = this.menuId;
  },
  methods: {
    //得到菜单树
    getMenuTree() {
      menuTree().then(response => {
        this.treeData = [
          { value: "jxhx", label: "今夕何夕", children: response.data.data }
        ];
      });
    },
    //组件 自动完成 搜索时
    handleSearch(value) {
      let result;
      if (value) {
        result = dataSource.filter(data => {
          return data.toUpperCase().indexOf(value.toUpperCase()) != -1;
        });
      } else {
        result = [];
      }
      this.result = result;
    },
    onChange(current) {
      this.current = current;
    }
  },
  computed: {
    isMenu() {
      return this.menuForm.menuType == "MENU";
    },
    menuRules() {
      return this.isMenu ? menuRule : buttonRule;
    }
  },
  watch: {
    treeData() {
      this.$nextTick(() => {
        if (this.formState == "add") this.menuForm.parentId = this.menuId;
      });
    }
  }
};
</script>